<template>
  <div>
    <van-popup
      :value="dateModal"
      round
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-datetime-picker
        v-model="currentDate"
        type="year-month"
        title="选择月份"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        @confirm="dateModalConfrim"
        @cancel="cancel"
      />
    </van-popup>
  </div>
</template>
<script>
export default {
  name: 'data-picker-modal',
  props: {
    dateModal: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      minDate: new Date(2022, 0, 1),
      maxDate: new Date(),
      currentDate: new Date()
    }
  },
  methods: {
    formatter (type, val) {
      if (type === 'month') {
        return `${val}月`
      } else if (type === 'year') {
        return `${val}年`
      }
      return val
    },
    dateModalConfrim (value) {
      this.$emit('dateModalConfrim', value)
    },
    cancel () {
      this.$emit('cancel')
    }
  }
}
</script>
<style lang="less" scoped>
</style>
